<template>
  <!--登录框div的样式-->
  <div class="login">
    <el-card class="loginCard" shadow="always">
      <el-form :model="model" :rules="myrule" ref="myform">
        <h2 style="text-align: center"> 欢迎登录商品管理系统</h2>
        <el-form-item prop="username">
          <el-input
            type="text"
            v-model="model.username"
            auto-complete="off"
            placeholder="登录账号"
          >
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            type="password"
            v-model="model.password"
            auto-complete="off"
            placeholder="登录密码"
          >
          </el-input>
        </el-form-item>
        <el-form-item></el-form-item>
        <el-form-item>
          <el-button type="primary" @click="login(myform)" style="width: 100%">
            登 录
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
<script setup>
//注意：vue3.x组合式api，需要在<script>里面使用setup
import { ref, reactive } from "vue";

import { ElMessage } from "element-plus";
//导入axios实例(从封装的http.js中导入)
import http from "../../util/http.js";
//引入路由实例(从封装的myRouter.js中导入)
import router from "../../router/myRouter.js";
import { useStore } from 'vuex'
const store = useStore()
//把表单定义为一个响应数据对象
const myform = ref();
const model = reactive({
  username: "tan",
  password: "123",
});
const myrule = ref({
  username: [
    { required: true, message: "请输入登录账号", trigger: "blur" },
    { min: 2, max: 18, message: '登录账号长度必须2-18位', trigger: 'blur'},
    { validator: validate, trigger: 'blur' }
    ],
  password: [{ required: true, message: "请输入登录密码", trigger: "blur" },
    { validator: validatePass, trigger: 'blur' },
   { min: 3, max: 18, message: '登录密码长度必须3-18位', trigger: 'blur'}],
});
function validate (rule, value, callback) {
  if (value.trim() === '') {
    callback(new Error('请输入登录账号不能是空格'))
  } else {
    callback()
  }
}
function validatePass(rule, value, callback) {
  if (value.trim() === '') {
    callback(new Error('请输入登录密码不能是空格'))
  } else {
    callback()
  }
}
//登录验证函数
const login = async (form) => {
  let loginFlag = false;
  let userInfo = {};
  let valid = await form.validate();
  if (valid) {
    //TODO: 到后台验证用户
    //模拟登录
    let res = await http.post("/user/login", {...model});
    if (res.data.code === 200 && res.data.data !== '0') {
      loginFlag = true;
    }
    if (loginFlag) {
      const res = await http.get('/user/profile')
    //验证成功
    //使用vuex，存放用户信息
    userInfo = res.data.data
    store.commit('setUserInfo', userInfo)
     //验证成功
    ElMessage.success({
      message: "登录成功！",
    });
    //路由跳转: 跳转到主页
    router.push("/app/order");
  } else if(res.data.message === "用户名或密码错误") {
    //验证失败
    ElMessage.error({
      message: "用户名/密码错误，请重新登录！",
    });
    //路由跳转:跳转到重新登录页面
    router.push("/login");
  } else if(res.data.data === '0') {
      ElMessage.success({
      message: "你是普通用户登录不了哦",
    });
    }
  }


};
</script>

<style scoped>
.login {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background-image: url("../../assets/01.png");
}

.loginCard {
  position: relative;
  top: 150px;
  width: 300px;
  margin: 0 auto;
  padding: 0 20px;
  background-color: #fff;
  border: 5px #038eff;
  border-radius: 30px;
  box-shadow: 2px 2px 2px 2px gray;
}
</style>
